<template>
  <el-table
      :data="roleList"
      style="width: 100%"
      stripe
      border>

      <!-- 权限展开项 -->
      <el-table-column type="expand">
      <template v-slot="data">
        <role-table-expand-list :data="data.row"></role-table-expand-list>
      </template>
    </el-table-column>

      <!-- index 序列 -->
      <el-table-column
        label="#"
        type="index"
        align="center">
      </el-table-column>

      <!-- 角色名称 -->
      <el-table-column
        prop="roleName"
        label="角色名称"
        align="center">
      </el-table-column>

      <!-- 角色描述 -->
      <el-table-column
        prop="roleDesc"
        label="角色描述"
        align="center">
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        prop="level"
        label="操作"
        align="center">
        <template v-slot="data">
          <!-- 按钮区 -->
          <el-button-com size="small" btnType="primary" icon="el-icon-edit" text="编辑"    @click.native="openDialog(data.row)"/>
          <el-button-com size="small" btnType="danger" icon="el-icon-delete" text="删除"
            @click.native="delUserById(data.row)"/>
          <el-button-com size="small" 
            btnType="warning" icon="el-icon-setting" text="分配权限" @click.native="openTreeDialog(data.row)"/>

        </template>
      </el-table-column>

    </el-table>
</template>

<script>
// 组件
import ElButtonCom from '@/components/common/ElButtonCom';
import RoleTableExpandList from '@/views/Main/rightList/roleListComponents/RoleTableExpandList';

// 网络
import { delUserId } from '@/network/roleControlRequest';

export default {
  props: {
    roleList: {
      type: Array
    }
  },
  methods: {
    openDialog(row) { // 发送给dialog封装组件
      this.$bus.$emit('tableBtnId', row.id);
    },
    async delUserById(row) { // 根据id删除指定用户
      // console.log(row);

      // messageBox组件
      const ret = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
      })
      .catch(error => {
        return error;  
      });

      if (ret !== 'confirm') {
        return this.$message.error('删除操作取消');
      }

      // 网络请求删除操作
      // console.log('删除操作', row);
      const {meta} = await delUserId(row.id);

      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.$bus.$emit('getRole');
      return this.$message.success(meta.msg);
    },
    openTreeDialog(data) {
      this.$bus.$emit('treeDialogOpen', data);
    }
  },
  components: {
    ElButtonCom,
    RoleTableExpandList
  }
}
</script>

<style lang="scss" scoped>
  .el-table{
    margin-top: 20px;
  }
</style>